<style>
    /* .n-default .msg-wrap {
    top: -20px;
} */

    input[type="checkbox"],input[type="checkbox"]:focus {
        -webkit-appearance: none;
        height: 12px;
        width: 12px;
        border-radius: 6px;
        vertical-align: middle;
        background: #ffffff;
        margin-top: 0px;
        margin-right: 15px;
        border: 1px solid rgba(115, 123, 145, 1);
    }
    input[type="checkbox"]:checked {
        background: url('/assets/img/speech-ch.png') no-repeat center top;
        background-size: 100% 100%;
    }

    .checked-l {
        color: rgba(115, 123, 145, 1);
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 23px;
    }
    textarea::-webkit-input-placeholder {
            /* WebKit browsers */
            color: #ddd !important;
        }

        textarea:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #ddd !important;
        }

        textarea::-moz-placeholder{
            /* Mozilla Firefox 19+ */
            color: #ddd !important;
        }

        textarea:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #ddd !important;
        }
        .form-group .control-label span{
            color: red;
        }
    .checked-l input {
        margin-right: 15px;
    }

    .nav .open>a,
    .nav .open>a:hover,
    .nav .open>a:focus {
        background-color: #f7f7f7;
        border-color: rgba(238, 238, 238, 1);
    }

    .caret {
        margin-top: -2px;
        margin-left: 10px;
    }

    .nav-pills {
        margin-left: 30px;
        display: none;
    }

    .nav-pills>li.active>a {
        font-weight: 400;
    }

    .nav>li>a {
        padding: 0;
    }

    .nav-pills>li>a {
        background-color: #fff;
        color: rgba(115, 123, 145, 1);
        border-radius: 5px;
        border: 1px solid rgba(238, 238, 238, 1);
        width: 76px;
        height: 23px;
        font-size: 12px;
        line-height: 23px;
        text-align: center;
    }

    .nav-pills>li.active>a,
    .nav-pills>li.active>a:hover,
    .nav-pills>li.active>a:focus {
        background-color: #fff;
        color: rgba(115, 123, 145, 1);
    }
    .sp_container{
        width:100% !important;
    }
    .checked-l p{
        color: #999;
    }
    .guide-btn,.no-guide-btn{
        margin-top:7px;
    }
    .n-right .msg-wrap {
    margin-left: 24px;
}
.form-group.t{
    display: none;
}
.form-group{
    position: relative;
}
    .form-group i{
        cursor: pointer;
        color: rgba(51,51,51,0.65);
        position: absolute;
        top: 10px;
        right: -5px;
    }
    .form-group i:hover, .form-group i:active, .form-group i:focus {
        color: #32B3EA;
    }
</style>
<script src="/gongji/Recorderjs-master/recorder.js"></script>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text">
        </div>
    </div>
    <div class="form-group gudie-show">
        <label class="control-label col-xs-12 col-sm-2">引导语音1:</label>
        <div class="col-xs-12 col-sm-8">
            <input data-source="sound/index/status/1" class="form-control selectpage" type="text" data-rule="required"
                name="row[sound_id]" />
                <i class="fa fa-plus guide-add"></i>
        </div>
    </div>
    <div class="form-group no-gudie-show">
        <label class="control-label col-xs-12 col-sm-2">挽回语音1:</label>
        <div class="col-xs-12 col-sm-8">
            <input data-source="sound/index/status/1" class="form-control selectpage" type="text" name="row[no_sound_id]" data-rule=""/>
        </div>
    </div>
    <div class="form-group gudie-show2 t">
        <label class="control-label col-xs-12 col-sm-2">引导语音2:</label>
        <div class="col-xs-12 col-sm-8">
            <input data-source="sound/index/status/1" class="form-control selectpage" type="text" name="sound_id2"/>
            <i class="fa fa-minus gudie-del"></i>
        </div>
    </div>
    <div class="form-group no-gudie-show2 t">
        <label class="control-label col-xs-12 col-sm-2">挽回语音2:</label>
        <div class="col-xs-12 col-sm-8">
            <input data-source="sound/index/status/1" class="form-control selectpage" type="text" name="no_sound_id2"/>
        </div>
    </div>
    <div class="form-group gudie-show3 t">
        <label class="control-label col-xs-12 col-sm-2">引导语音3:</label>
        <div class="col-xs-12 col-sm-8">
            <input data-source="sound/index/status/1" class="form-control selectpage" type="text" name="sound_id3"/>
            <i class="fa fa-minus gudie-del"></i>
        </div>
    </div>
    <div class="form-group no-gudie-show3 t">
        <label class="control-label col-xs-12 col-sm-2">挽回语音3:</label>
        <div class="col-xs-12 col-sm-8">
            <input data-source="sound/index/status/1" class="form-control selectpage" type="text" name="no_sound_id3"/>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8" style='text-align: center;'>
            <button type="submit" class="btn btn-info btn-embossed disabled" style='margin-right: 10px;padding:3px 12px;'>{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed" style='padding:4px 12px;'>{:__('Reset')}</button>
        </div>
    </div>
    <input id="c-speech_id" data-rule="required" name="row[speech_id]" type="hidden" value="{$Request.get.speech_id}" />
</form>